import React from 'react';

const CyberBackground = ({ simplified = false, disabled = false }) => {

  // if (simplified||disabled) {
  //   return (
  //     <div className="fixed inset-0 z-[-1] bg-gray-900">
  //       <div className="absolute inset-0 bg-gradient-to-b from-cyan-900/20 via-gray-900 to-purple-900/20"></div>
  //     </div>
  //   );
  // }

  return (
    <>
      <style jsx>{`
        .bg-cyber-grid {
          background-image: 
            linear-gradient(to right, rgba(6, 182, 212, 0.2) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(6, 182, 212, 0.2) 1px, transparent 1px);
          background-size: 30px 30px;
          transform: perspective(1000px) rotateX(60deg);
          transform-origin: top;
          will-change: transform;
        }

        .bg-cyber-grid::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.8) 40%,
            rgba(0, 0, 0, 1) 100%
          );
        }

        @keyframes bg-neonPulse {
          0%, 100% {
            opacity: 1;
            filter: brightness(1) blur(20px);
          }
          50% {
            opacity: 0.6;
            filter: brightness(1.2) blur(25px);
          }
        }

        @keyframes bg-floatingHexagons {
          0% {
            transform: translateY(0) rotate(0deg);
          }
          100% {
            transform: translateY(-100%) rotate(360deg);
          }
        }

        .bg-hexagon {
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
          animation: bg-floatingHexagons 20s linear infinite;
          will-change: transform;
          backface-visibility: hidden;
        }

        .bg-cyber-vignette {
          background: radial-gradient(
            circle at center,
            transparent 0%,
            rgba(0, 0, 0, 0.4) 70%,
            rgba(0, 0, 0, 0.8) 100%
          );
        }

        .bg-neon-text-glow {
          text-shadow: 0 0 10px rgba(6, 182, 212, 0.7),
                       0 0 20px rgba(6, 182, 212, 0.5),
                       0 0 30px rgba(6, 182, 212, 0.3);
        }

        .bg-neon-circle {
          animation: bg-neonPulse 4s ease-in-out infinite;
          will-change: opacity, filter;
          transform: translateZ(0);
        }

        @keyframes bg-scanline {
          0% {
            transform: translateY(-100%);
          }
          100% {
            transform: translateY(100%);
          }
        }

        .bg-scanline {
          animation: bg-scanline 8s linear infinite;
          will-change: transform;
          transform: translateZ(0);
        }
      `}</style>

      <div className="fixed inset-0 z-[-1] bg-gray-900 overflow-hidden">
        {/* Base gradient background */}
        <div className="absolute inset-0 bg-gradient-to-b from-cyan-900/20 via-gray-900 to-purple-900/20"></div>

        {/* Grid ground effect */}
        <div className="absolute inset-0 h-[200vh] bg-cyber-grid opacity-40"></div>

        {/* Floating hexagons - reduced quantity and optimized with useMemo */}
        {/* <div className="absolute inset-0 overflow-hidden">
          {React.useMemo(() => 
            [...Array(6)].map((_, i) => {
              const size = Math.random() * 100 + 50;
              return (
                <div
                  key={i}
                  className="absolute bg-hexagon"
                  style={{
                    width: `${size}px`,
                    height: `${size}px`,
                    left: `${Math.random() * 100}%`,
                    top: `${Math.random() * 100}%`,
                    background: `rgba(6, 182, 212, ${Math.random() * 0.1})`,
                    animationDelay: `${Math.random() * 20}s`
                  }}
                />
              );
            }), [])}
        </div> */}

        {/* Halo effect - using transform instead of absolute positioning */}
        <div className="absolute inset-0">
          {/* <div className="absolute left-1/2 top-1/3 -translate-x-1/2 -translate-y-1/2">
            <div className="w-[600px] h-[600px] rounded-full bg-cyan-500/20 bg-neon-circle 
                          backdrop-blur-[100px] translate-z-0"></div>
          </div> */}
          <div className="absolute left-0 top-0">
            <div className="w-[400px] h-[400px] rounded-full bg-purple-500/20 bg-neon-circle 
                          backdrop-blur-[50px] translate-z-0"></div>
          </div>
          <div className="absolute right-0 bottom-0">
            <div className="w-[400px] h-[400px] rounded-full bg-pink-500/20 bg-neon-circle 
                          backdrop-blur-[50px] translate-z-0"></div>
          </div>
        </div>

        {/* Vignette effect */}
        <div className="absolute inset-0 bg-cyber-vignette pointer-events-none"></div>

        {/* Scan line effect */}
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute inset-x-0 h-[2px] bg-cyan-500/10 bg-scanline blur-sm"></div>
        </div>

        {/* Noise mask */}
        <div className="absolute inset-0 bg-noise opacity-[0.03] mix-blend-overlay"></div>
      </div>
    </>
  );
};

export default CyberBackground; 